<script setup>
import { ref } from 'vue';
import axios from 'axios';

const fileList = ref([]);//组件上传图片的存储集合
const imageUrl = ref([]);//存储图片URL的集合
const uploadRef = ref(null);//获取组件的实例
const hostURL = 'http://localhost:8081'; //你的服务器地址
// 上传按钮点击事件
const submitUpload = () => {
  uploadRef.value.submit(); // 触发文件上传
}
// 自定义上传方法
const picUpload = async (content) => {
  console.log(content);
  // FormData 对象用于存储表单数据,特别适合用于文件上传，因为它可以处理二进制数据
  const params = new FormData();
  // 
  params.append('file', content.file);
  try {
    const response = await axios.post(
      'http://localhost:8081/api/user/upload', // 请求的 URL
      params, // 请求的数据
      {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      }
    );
    console.log('后端返回的数据:', response.data);
    const imageId = response.data; //直接从 response.data 中提取文件名
    console.log('imageId', imageId);
    imageUrl.value.push(`${hostURL}/api/user/image/${imageId}`); // 构建图片 URL
  } catch (error) {
    console.error('Upload failed:', error);
    // 可以在这里显示错误提示，例如弹窗或错误消息
  }
};
</script>
<template>
  <div>
    <div>
      <el-upload class="upload-demo" ref="uploadRef" :action="''"
        :http-request="picUpload"  multiple :file-list="fileList" :auto-upload="false">
        <el-button type="primary" size="small">选取文件</el-button>
        <el-button style="margin-left: 10px;" type="success" size="small" @click="submitUpload">
          上传到服务器
        </el-button>
      </el-upload>
    </div>
    <div>
      <h3>这是你上传的图片：</h3>
      <div v-for="(item, index) in imageUrl" :key="index">
        <img v-if="item" :src="item" style="width: 400px; height: 300px; margin-top: 10px" />
        <span v-else>暂未收到图片</span>
      </div>
    </div>
  </div>
</template>
<style scoped>
/* 你可以在这里添加样式 */
</style>